<script setup lang="ts">
import LEchart from '@/pagesReport/lime-echart/components/l-echart/l-echart.vue'
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import type { coordinate } from '@/types/report'
import { addBreakpoint } from '@/utils/report'
import { useReportStore } from '@/stores'
//收缩压和舒张压
const dPressuredata = ref<coordinate[]>([])
const sPressuredata = ref<coordinate[]>([])
const pressureChart = ref()
const reportStore = useReportStore()
const pressureoptin = ref({
  tooltip: {
    trigger: 'axis',
    confine: true,
  },
  legend: {
    bottom: '3%',
    data: [
      {
        name: '收缩压',
      },
      {
        name: '舒张压',
      },
    ],
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: 0,
    max: 140,
    splitNumber: 7,
  },
  grid: {
    top: '12%',
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
  ],
  series: [
    /* 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color */
    {
      connectNulls: false,
      name: '收缩压',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: sPressuredata.value,
      itemStyle: {
        color: '#fb675a',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 139,
            lineStyle: {
              color: '#fb675a',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 90,
            lineStyle: {
              color: '#fd675b',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
    {
      connectNulls: false,
      name: '舒张压',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: dPressuredata.value,
      itemStyle: {
        color: '#3873d6',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 60,
            lineStyle: {
              color: '#3873d6',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 89,
            lineStyle: {
              color: '#3873d6',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
  ],
})
onMounted(async () => {
  //初始化图表
  if(!reportStore.report) return
  addBreakpoint(reportStore.report!.picturesData.humidityPictureDataList, dPressuredata.value)
  addBreakpoint(reportStore.report!.picturesData.tempPictureDataList, sPressuredata.value)
  const pressurechart = await pressureChart.value.init(echarts)
  pressurechart.setOption(pressureoptin.value)
})
watch(
  () => reportStore.report,
  async (newReport) => {
    if (newReport) {
      //摧毁原来的图表重新创建
      pressureChart.value.dispose()
      //addBreakpointht工具函数第二个参数必须是空数组
      dPressuredata.value = []
      sPressuredata.value = []
      //console.log('清空后的心率数据', heartdata.value)
      addBreakpoint(newReport.picturesData.humidityPictureDataList, dPressuredata.value)
      addBreakpoint(newReport.picturesData.tempPictureDataList, sPressuredata.value)
      //给option赋值
      pressureoptin.value.series[0].data = sPressuredata.value
      pressureoptin.value.series[1].data = dPressuredata.value
      const pressurechart = await pressureChart.value.init(echarts)
      pressurechart.setOption(pressureoptin.value)
    }
  },
)
</script>
<template>
  <view class="chart">
    <LEchart ref="pressureChart"></LEchart>
  </view>
</template>
<style lang="scss"></style>
